<template>
  <Card>
    <Form ref="searchForm" :label-width="90" :model="searchForm" inline>
      <FormItem label="月份：" prop="month">
        <DatePicker
          v-model="searchForm.date"
          format="yyyy-MM"
          placeholder="选择月份"
          type="month"
          @on-change="searchForm.month=$event"
        ></DatePicker>
      </FormItem>
      <Form-item style="margin-left:-90px;">
        <Button icon="md-search" type="primary" @click="handleSearch">搜索</Button>
        <Button @click="handleReset">重置</Button>
      </Form-item>
    </Form>
    <div class="btns" style="margin-bottom:10px;">
      <Button icon="ios-add" type="primary" @click="toAdd()">新建</Button>
    </div>
    <Table
      ref="dataSetTable"
      :columns="dataSetColumn"
      :data="dataSetData"
      :loading="dataSetLoading"
      border
      size="small"
      stripe
    >
      <template slot="personCount" slot-scope="{ row }">
        <Badge :count="row.personCount" class-name="demo-badge-alone" overflow-count="999"></Badge>
      </template>
      <template slot="action" slot-scope="{ row }">
        <a
          class="edit"
          size="small"
          style="color:#2d8cf0;font-size: 12px;"
          type="text"
          @click="edit(row)"
        >编辑</a>
        <Divider type="vertical"/>
        <a class="del" style="color:#ed4014;font-size: 12px;" @click="del(row)">删除</a>
      </template>
    </Table>
    <Row class="page" justify="end" type="flex">
      <Page
        :current="searchForm.pageNumber"
        :page-size="searchForm.pageSize"
        :total="dataSetTotal"
        show-total
        @on-change="changePage($event)"
      />
    </Row>
    <Modal
      v-model="dataSetModalVisible"
      :mask-closable="false"
      :title="dataSetModalTitle"
      :width="750"
    >
      <Form ref="dataSetForm" :label-width="100" :model="dataSetForm" :rules="dataSetFormValidate">
        <Row>
          <Col span="12">
          <FormItem label="月份：" prop="month">
            <DatePicker
              v-model="dataSetForm.month"
              format="yyyy-MM-dd"
              placeholder="选择月份"
              type="month"
              @on-change="dataSetForm.month=$event"
            ></DatePicker>
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
          <FormItem label="工资名称：" prop="type">
            <Input v-model="dataSetForm.type" placeholder="请输入工资名称"/>
          </FormItem>
          </Col>
          <Col span="12">
          <FormItem label="金额：" prop="amount">
            <InputNumber
              v-model="dataSetForm.amount"
              :max="10000000"
              :min="-1000000"
              style="width: 100%"
            ></InputNumber>
          </FormItem>
          </Col>
        </Row>
        <Form :label-width="100">
          <FormItem label="设置范围：">
            <Select v-model="objectType">
              <Option :value="0">全部人员</Option>
              <Option :value="1">选择人员</Option>
            </Select>
          </FormItem>
        </Form>
        <Alert v-if="objectType===0" show-icon>设置全部人员</Alert>
        <Alert v-if="objectType===1" show-icon>请选择人员</Alert>
        <div v-if="objectType===1" style="margin-top:15px">
          <Tree ref="lineTree" :data="data2" show-checkbox></Tree>
        </div>
      </Form>
      <div slot="footer">
        <Button type="text" @click="dataSetHandleCancel">取消</Button>
        <Button :loading="dataSetSubmitLoading" type="primary" @click="dataSetHandleSubmit">提交</Button>
      </div>
    </Modal>
  </Card>
</template>
<script>
import {getAllPersonnel} from '../../api/personnel'
import {destroy, edit, payOthersList, store, update} from '../../api/payOthers'

export default {
  data() {
    return {
      data2: [],
      searchForm: {
        month: '',
        pageNumber: 1,
        pageSize: 10
      },
      objectType: 0,
      dataSetSubmitLoading: false,
      dataSetModalType: 0,
      dataSetModalVisible: false,
      dataSetModalTitle: '',
      dataSetForm: {
        type: '',
        amount: 0,
        month: ''
      },
      dataSetFormValidate: {},
      dataSetLoading: false,
      dataSetData: [],
      loading: false,
      dataSetTotal: 0,
      dataSetColumn: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '月份',
          key: 'month',
          align: 'center'
        },
        {
          title: '工资类型',
          key: 'type',
          align: 'center'
        },
        {
          title: '金额',
          key: 'amount',
          align: 'center'
        },
        {
          title: '设置范围',
          key: 'object',
          align: 'center'
        },
        {
          title: '人数',
          slot: 'personCount',
          align: 'center'
        },
        {
          title: '创建时间',
          key: 'created_at',
          align: 'right'
        },
        {
          title: '操作',
          slot: 'action',
          width: 175,
          align: 'center'
        }
      ]
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    changePage(v) {
      this.searchForm.pageNumber = v
      this.getPayOthersList()
    },
    dataSetHandleCancel() {
      this.dataSetModalVisible = false
    },
    dataSetHandleSubmit() {
      this.$refs.dataSetForm.validate(valid => {
        if (valid) {
          let depIds = ''
          if (this.objectType === 1) {
            const selectedNodes = this.$refs.lineTree.getCheckedNodes()
            if (selectedNodes.length < 1) {
              this.$Message.error('请至少选择一条数据')
              return
            }
            selectedNodes.forEach(function (e) {
              if (!isNaN(e.id)) {
                depIds += e.id + ','
              }
            })
            this.dataSetForm.depIds = depIds.substring(0, depIds.length - 1)
          }
          this.dataSetForm.object_type = this.objectType
          this.dataSetSubmitLoading = true
          if (this.dataSetModalType === 0) {
            // 添加 避免编辑后传入id等数据 记得删除
            delete this.dataSetForm.id
            store(this.dataSetForm).then(res => {
              this.dataSetSubmitLoading = false
              if (res.data) {
                this.$Message.success(res.message)
                this.getPayOthersList()
                this.dataSetModalVisible = false
              } else {
                this.$Message.error(res.message)
              }
            })
          } else {
            update(this.dataSetForm, this.dataSetForm.id).then(res => {
              this.dataSetSubmitLoading = false
              if (res.data) {
                this.$Message.success(res.message)
                this.getPayOthersList()
                this.dataSetModalVisible = false
              } else {
                this.$Message.error(res.message)
              }
            })
          }
        }
      })
    },
    del(row) {
      this.$Modal.confirm({
        title: '确认删除',
        loading: true,
        content: '您确认要删除此条数据吗？',
        onOk: () => {
          const ids = row.id
          // 批量删除
          destroy(ids).then(res => {
            this.$Modal.remove()
            if (res.data === true) {
              this.$Message.success(res.message)
              this.getPayOthersList()
            } else {
              this.$Message.error(res.message)
            }
          })
        }
      })
    },
    edit(row) {
      this.dataSetModalType = 1
      this.dataSetModalTitle = '编辑'
      edit(row.id).then(res => {
        const data = res.data.formData
        data.amount = parseFloat(data.amount)
        this.dataSetForm = data
        this.objectType = data.object_type
        this.data2 = res.data.treeData
        this.dataSetModalVisible = true
      })
    },
    getPayOthersList() {
      this.dataSetSelectCount = 0
      this.dataSetLoading = true
      payOthersList(this.searchForm).then(res => {
        this.dataSetLoading = false
        if (res.data) {
          this.dataSetData = res.data.payOthersList
          this.dataSetTotal = res.data.count
        }
      })
    },
    handleReset() {
      this.$refs.searchForm.resetFields()
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.getPayOthersList()
    },
    handleSearch() {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.getPayOthersList()
    },
    init() {
      this.getPayOthersList()
    },
    toAdd() {
      this.dataSetModalType = 0
      this.dataSetModalTitle = '新建'
      this.$refs.dataSetForm.resetFields()
      this.objectType = 0
      delete this.dataSetForm.id
      getAllPersonnel().then(res => {
        this.data2 = res.data.result
        this.dataSetModalVisible = true
      })
    }
  }
}
</script>
<style>
.ivu-tabs .ivu-select-dropdown {
  left: 0 !important;
}

.demo-badge-alone {
  background: #faad14 !important;
}
</style>
